<template>
  <van-divider>评论区</van-divider>
  <van-cell-group inset v-for="(commentVO, index) in commentVOList" :key="index">
    <van-cell center>
      <template #icon>
        <van-image round :src="processImageUrl(commentVO.userAvatarUrl)" width="40" height="40"/>
      </template>
      <template #title>
        <div>{{ commentVO.username }}</div>
      </template>
      <template #label>
        <div style="margin-top: 8px;">{{ commentVO.text }}</div>
      </template>
      <template #right-icon>
        <van-icon name="delete-o" class="delete-o" v-if="commentVO.isMyComment" @click="deleteComment(commentVO.id)"/>
      </template>
    </van-cell>
  </van-cell-group>
  <div style="width: 100%; height: 60px"></div>
</template>

<script setup lang="ts">

import {CommentVOType} from "../models/commentVO";
import myAxios from "../plugins/myAxios";
import {showFailToast, showToast} from "vant";
import {defineEmits} from "vue";
import { processImageUrl } from '../utils/imageUtils';

interface CommentVOListProps {
  commentVOList: CommentVOType[]
}

defineProps<CommentVOListProps>();

// 定义 emit 事件
const emit = defineEmits(['delete-comment']);

const deleteComment = async (id) => {
  const res : any = await myAxios.post('/comment/delete', {
    id: id
  });
  if (res?.code === 0) {
    showToast('删除成功');
    emit('delete-comment');
  } else {
    showFailToast('删除失败' + (res.description ? `，${res.description}` : ''));
  }
};
</script>

<style scoped>
.delete-o{
  font-size: 16px;
  line-height: inherit;
}
</style>